<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="(isHandset$ | async) === false"
    >
    <mat-toolbar>ngx-three</mat-toolbar>
    <mat-nav-list>
      @for (route of routes; track route) {
        <a mat-list-item [routerLink]="route.path">{{
          route.data.title
        }}</a>
      }
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content class="content">
    <mat-toolbar color="primary">
      @if (isHandset$ | async) {
        <button
          type="button"
          aria-label="Toggle sidenav"
          mat-icon-button
          (click)="drawer.toggle()"
          >
          <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
        </button>
      }
      <span>ngx-three-demo</span>
      <span class="toolbar-spacer"></span>
      @if (this.editorService.urls.length) {
        <button
          mat-button
          (click)="this.editorService.toCodeSandbox($event)"
          href="#"
          >
          <mat-icon>crop_din</mat-icon>
          CodeSandbox
        </button>
      }
      @if (this.editorService.urls.length) {
        <button
          mat-button
          (click)="this.editorService.toStackblitz($event)"
          href="#"
          >
          <mat-icon>bolt</mat-icon>
          Stackblitz
        </button>
      }
    </mat-toolbar>
    <!-- Add Content Here -->
    <div class="main-route-content">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>
